<template>
    <div class="adcharge">

    <div class="fromCard">
   <el-form
   :model="ruleForm" 
   :rules="rules" 
   ref="ruleForm" 
   label-width="100px" 
   class="chargeForm"
   size="small"
   label-position="left"
   >
  <el-form-item label="HIGO ID" prop="erbanNo">
    <el-input v-model="ruleForm.erbanNo"></el-input>
  </el-form-item>

  <el-form-item  :label="$t('coincharge.chargeAmount')" prop="resource">
    

      <el-input v-model="ruleForm.coin"></el-input>
  </el-form-item >
    <el-form-item class="lestcoins" :label="$t('coincharge.restCoins')" > 
     {{userinfo.coinBalance}}
  </el-form-item>
  <el-form-item class="btnzoon"> 
     <el-button @click="resetForm">{{$t("adbuy.reset")}}</el-button>
     <el-button :disabled="!subBtnStatus" type="primary" @click="goCharge">{{$t("coincharge.creator")}}</el-button>
  </el-form-item>
</el-form>
    </div>
    <div class="foottable">
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="orderNo"
      align="center"
      :label="$t('table.chargeor')"
      width="120">
    </el-table-column>
    <el-table-column
      prop="erbanNo"
      align="center"
      label="HIGO ID"
      width="90">
    </el-table-column>
    <el-table-column
      prop="nick"
      align="center"
      :label="$t('table.user')+$t('table.nick')">
    </el-table-column>
        <el-table-column
      prop="coin"
      align="center"
      :label="$t('table.chargecoin')">
    </el-table-column>
        <el-table-column
      prop="chargeTime"
      align="center"
      :label="$t('table.creattime')"
      >
    </el-table-column>
            <el-table-column
      prop="arrivalTime"
      :label="$t('table.arrived')"
     align="center"
      >
    </el-table-column>
  </el-table>
    </div>
    </div>
        
   
</template>



<script>
import { addCoins,getAdminUser,getMallAccount } from "../Util/request";
  export default {
    data() {
      return {
        ruleForm: {
          erbanNo: '',        
          coin:'',
          mallId:"",
        },
        rules: {
          name: [
            { required: true, message: this.$t('login.pl')+'HIGOID', trigger: 'blur' },
            {  max: 8, trigger: 'blur' }
          ],
          type: [
           { required: true, message: this.$t('login.pl')+this.$t('coincharge.chargeAmount'), trigger: 'blur' },
          ],
    
        },
        userinfo:{
          coinBalance:0,

        },
        tableData: [],
        subBtnStatus:false
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           console.log(valid);
          } else {
            console.log('error submit!!');
            console.log(valid);
            return false;
          }
        });
      },
      resetForm(formName) {
        this.ruleForm.erbanNo=null
        this.ruleForm.coin=null
       
          // mallId:"",
        
      },
      goCharge(){
      
      addCoins((res)=>{
        if(res.code==200){
         this.userinfo.coinBalance = this.userinfo.coinBalance  - this.ruleForm.coin
         this.tableData= [{...res.data}]
         this.$message({
           message:res.msg,
           type:"success"
         })
        }else{
          this.$message({
          message:res.msg,
           type:"warning"
          })
        }
 
        },this.ruleForm)
      }  
    },
    created(){
      getAdminUser((res)=>{
        // console.log(res);
        this.ruleForm.mallId=res.data.mallId
       
        getMallAccount((res)=>{
     
         this.userinfo.coinBalance=res.data.coinBalance
         if(this.userinfo.coinBalance==0){
           this.$message({
             message:this.$t('notic.balance'),
             type:"warning"
           })
         }
      },{mallId:this.ruleForm.mallId})
      })
    },
    watch:{
      ruleForm:{
        deep:true,
        handler(n){
          if(n.erbanNo&&n.coin){ 
            this.subBtnStatus= true
          }else{
            this.subBtnStatus =false
          }
        }
      }
    }

  }
</script>

<style lang="less" scoped>

    .adcharge{
        width: 100%;
        height: 100%;
        position: relative;
     
        .fromCard{
            position: absolute;
            width: 350px;
            height: 250px;
            top: 25px;
            left: 25px;
            background-color: #fff;
            box-shadow: -8px -7px 11px #0000004d;
            /deep/.el-form-item__label{
                line-height:30px;
                font-size: 12px;
            }
            /deep/.el-form-item{
                height: 30px;
            }
               .chargeForm{
                   margin: 10px auto 0;
                    width: 270px;
                    height: 100%;
                    .lestcoins{
                      // margin-top: 60px;
                    }
                    .btnzoon{
                        margin-top: 15px;
                    }
                }
          .el-radio-group{
                    display: inline-flex;
                    line-height: 1;
                    vertical-align: middle;
                    flex-wrap: wrap;
                    height: 90px;
                    .el-radio{
                        margin-right:15px;
                    }
            }
           
        }
        .foottable{
            position: absolute;
            width: 100%;
            height: 300px;
            top: 300px;
            left: 25px;
            background-color: #fff;
            box-shadow: -8px -4px 19px #b7b7b7;

        }
    }
</style>